<template>
<div :class="coupon.isCheckedCou?'exchange_card exchange_card_left':'exchange_card'">
  <div :class="coupon.num<=1?'cardBg1 bgc_tp':'cardBg1'">
    <div class="bgLine">
      <img v-if="coupon.num<=1" src="../../../images/cardBg_05.png">
      <img v-if="coupon.num>1" src="../../../images/cardBg.png">
    </div>
    <a class="cardBg2 white_bg">
      <div v-if="coupon.delayed!=4" class="card_tit clearfix">
          有效期：{{coupon.validatyBegin | strDate(1)}} 至 {{coupon.validatyEnd | strDate(1)}}
      </div>
      <div v-if="coupon.delayed==4" class="card_tit card_overdue clearfix">
          该电子券已过期
      </div>
      <div class="couponDiv">
        <coupon-denomination :item="coupon"></coupon-denomination>
      </div>
      <div class="card_info">
        <div class="card_name">{{coupon.name}}</div>
        <div class="coupon_info_item">
          <star :couponComScore="coupon.comScore"></star>
          <p class="info_pad" v-if="coupon.type=='voucher'">{{coupon.comNum}}条 &nbsp;&nbsp;抵用券<span class="color-red">{{coupon.num}}</span>张</p>
          <p class="info_pad" v-if="coupon.type=='ticket'">{{coupon.comNum}}条 &nbsp;&nbsp;票务<span class="color-red">{{coupon.num}}</span>张</p>
          <p class="info_pad" v-if="coupon.type=='present'">{{coupon.comNum}}条 &nbsp;&nbsp;礼品券<span class="color-red">{{coupon.num}}</span>张</p>
          <p class="info_pad" v-if="coupon.type=='rebate'">{{coupon.comNum}}条 &nbsp;&nbsp;折扣券<span class="color-red">{{coupon.num}}</span>张</p>
          <p class="info_pad" v-if="coupon.type=='cash'">{{coupon.comNum}}条 &nbsp;&nbsp;代金券<span class="color-red">{{coupon.num}}</span>张</p>
        </div>

        <div class="coupon_info_item color_gray">
          已售出 {{coupon.soldnum}} &nbsp;&nbsp;&nbsp;已使用 {{coupon.usednum}}
        </div>
      </div>
    </a>
    <a href="javascript:void(0);" class="card_btn"  @click="goCouponDetl(coupon)">
      <span class="left">使用须知</span>
      <em class="iconfont icon-right right"></em>
    </a>
  </div>
  <div :class="coupon.isCheckedCou?'card_op card_menu_op':'card_op'">
    <div :class="coupon.num<=1?'card_menu card_menu_pr':'card_menu'" @click="checked">
      <i v-if="!coupon.isShare" class="iconfont icon-02-copy"></i>
      <i v-else class="iconfont icon-checked"></i>
    </div>
  </div>

</div>
</template>

<script>
import star from '../../../componentes/global/star.vue'
import { mapState } from 'vuex'
import { Toast } from 'mint-ui'
import {Storage} from 'src/utils/storage.js'

export default {
  name: 'coupon-cards',
  components: {star},
  data: () => ({
      shareInfoHidden:''
  }),
  props: {
    coupon: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number,
      default: 0
    },
      shareBox:Number,
  },
  computed:{
      ...mapState({
          userInfo:state => state.user.userInfo
      })
  },
  methods: {
    checked() {
        if(this.coupon.shareProp&& !(this.coupon.shareProp==0)){
            this.shareInfoHidden = 'hidden'
        }
        this.$emit("is-checked", this.index, this.coupon,this.shareInfoHidden)
    },
    goCouponDetl(params){
          if (params.delayed) {
            Toast({
                message: '过期电子券不可分享',
                duration: 1000
            });
            return;
          }
          var me=this;
          Storage.set("couponInfo",params);
          // this.$router.push({name:'couponDetail',query:{type:'noExchange'}});
          this.$router.push({
            name:'couDetail',
            query: {
              type:'noExchange',
              couponId: params.couponId,
              mchtId: params.mchtId,
              seq: params.seqNo||'',
              usrId: '',
              usrPicId: ''
            }
          });
    }
  },
  filters: {
    Time: function(value) {
      let timeVal = `${value.substring(0, 4)}.${value.substring(4, 6)}.${value.substring(6, 8)}`
      return timeVal;
    }
  }
}
</script>

<style scoped>
.share_btn {
  width: 100%;
  height: 2.8rem;
  line-height: 2.8rem;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 12;
  font-size: 1rem;
  color: #e34d86;
}

.share_list .mint-cell-wrapper {
  padding: 4px 0 0 0;
  background-image: none;
}

.share_list .mint-cell-title {
  display: none;
}

.share_list .mint-cell-value {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.share_list .mint-cell {
  background-color: transparent;
}

.share_list .card_menu {
  opacity: 1;
  height: 12rem;
  top: -0.34rem;
  padding-top: 5rem;
}

.share_list .card_op {
  opacity: 0;
}

.share_list .card_menu_op {
  opacity: 1;
}

.share_list .card_menu:before {
  bottom: 2.8rem;
  left: -0.5rem;
}

.share_list .card_btn {
  bottom: -.9rem;
}

.share_list .card_btn em {
  font-size: 1rem;
}
.share_list .exchange_card {
  position: relative;
  height: 12rem;
  margin-bottom: .6rem;
}
.share_list .exchange_card:last-child{
  margin-bottom:0;
}
.exchange_card {
  transition: all .3s;
}
.exchange_card .cardBg1 {
  height: 100%;
}

.share_list .exchange_card_left {
  left: -4rem;
}

.share_list .cardBg1 {
  z-index: 10;
}

.share_list .card_menu_single:before {
  left: -0.5rem;
}

.circular {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #ec4e8a;
}

.icon-02-copy {
  padding-top: 0.42rem;
}
.cardBg2 {
    position: absolute;
    top: -.3rem;
    left: .3rem;
    z-index: 1;
    box-sizing: border-box;
    padding: .6rem;
    width: -webkit-calc(100% - .6rem);
    height: -webkit-calc(100% + .6rem);
    border-radius: .2rem;
    /*background: #fff;*/
}
.card_overdue{text-align: center;color: #ff0000;}

</style>
